<script setup lang="ts">
import { computed, ref } from 'vue'
import chart from '@/components/common/chart.vue'

interface chartData {
  name:string,
  value: number
}

const props = defineProps<{
  data: chartData[]
  height?: string,
  width?: string,
  color?: [][]
}>()

const width = props.width || '100%';
const height = props.height || '100%';
const color = props.color || [
  ['rgba(90, 163, 90, 1)', 'rgba(90, 163, 90, 0.3)','rgba(90, 163, 90, 0)'],
  ['rgba(129, 233, 129, 1)', 'rgba(129, 233, 129, 0.6)','rgba(129, 233, 129, 0)'],
  ['rgba(63, 177, 227, 1)', 'rgba(63, 177, 227, 0.5)','rgba(63, 177, 227, 0)'],
  ['rgba(160, 167, 230, 1)', 'rgba(160, 167, 230, 0.5)','rgba(160, 167, 230, 0)'],
  ['rgba(107, 230, 193, 1)', 'rgba(107, 230, 193, 0.5)','rgba(107, 230, 193, 0)'],
  ['rgba(150, 222, 232, 1)', 'rgba(150, 222, 232, 0.6)','rgba(150, 222, 232, 0)'],
  ['rgba(98, 108, 145, 0.6)', 'rgba(98, 108, 145, 0.6)','rgba(98, 108, 145, 0)'],
  ['rgba(90, 163, 163, 1)', 'rgba(90, 163, 163, 0.6)','rgba(90, 163, 163, 0)']
]

const options = computed(() => {
  let series1:any[] = [];
  let series2:any[] = [];

  props.data.forEach((item, index) => {
    series1.push({
      value: item.value,
      name: item.name,
      itemStyle: {
        color: color[index][0]
      }
    })
    series2.push({
      value: item.value,
      name: item.name,
      itemStyle: {
        color: {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [{
              offset: 0, color: color[index][1] // 0% 处的颜色
          }, {
              offset: 1, color: color[index][2] // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
    })
  })


  let opt = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Funnel',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '45%',
        min: 0,
        max: 100,
        minSize: '5%',
        maxSize: '100%',
        sort: 'descending',
        funnelAlign: 'left',
        label: {
          show: false,
        },
        labelLine: {
          length: 1,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
          borderJoin: 'round',
          // color: ['#3fb1e3','#6be6c1','#626c91','#a0a7e6','#5aa3a3','#96dee8','#5aa35a','#81e981'],
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: series1
      },
      {
        name: 'Funnel',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '90%',
        min: 0,
        max: 100,
        minSize: '60%',
        maxSize: '95%',
        sort: 'descending',
        funnelAlign: 'left',
        label: {
          show: true,
          position: 'insideRight',
          padding: [0, 10, 0, 0],
          fontSize: 14,
          // color: '#000',
          borderWidth: 0,
          shadowBlur: 0,
          fontFamily: 'Microsoft YaHei',
          formatter: '{name|{b}}\n{number|{c}}',
          rich: {
            name: {
              fontSize: 12,
              lineHeight: 20,
            },
            number: {
              fontSize: 16,
              lineHeight: 24
            }
          }
        },
        labelLine: {
          show: false,
          length: 1,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
          borderGap: 'round',
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: series2
      }
    ],
    color: ['#3fb1e3','#6be6c1','#626c91','#a0a7e6','#5aa3a3','#96dee8','#5aa35a','#81e981'],
  }
  return opt;
})

</script>

<template>
  <div :style="{ width: `${width}`, height: `${height}` }" class="chart-box">
    <chart class="chart" :options="options" />
  </div>
</template>

<style scoped lang="stylus">
.chart-box {
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>